<template>
  <div class="app-container">
    <!-- 弹出窗口 -->
    <!-- 1. 导入窗口 -->
    <vxe-modal v-model="upload.open"
               :z-index="100"
               :esc-closable="true"
               transfer
               show-footer
               lock-view
               lock-scroll
               :title="upload.title"
               destroy-on-close
               width="480"
               height="460"
               resize>
      <template>
        <div class="batch-create-container" style="margin: 10px;">
          <div
            class="params-form-wrapper"
            style="color: #606266;">
            <el-row style="margin-bottom: 15px">
              <div style="border: 1px solid #e6ebf5; padding: 15px 20px">
                <el-button type="text" style="float: right; padding: 3px 0" @click="importTemplate">
                  <i class="el-icon-document">下载导入模板</i>
                </el-button>
                <span style="color: #909399; font-size: 12px;">
                  下载Excel导入模板，并填写内容
                </span>
              </div>
            </el-row>
            <el-row>
              <el-upload
                ref="upload"
                :multiple="false"
                :headers="upload.headers"
                :disabled="upload.isUploading"
                :limit="1"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :with-credentials="true"
                :auto-upload="false"
                class="upload-file"
                drag
                style="display:block"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                accept=".xls,.xlsx,.csv">
                <i class="el-icon-upload"/>
                <div class="el-upload__text" style="color: #909399">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip" style="color: #909399">
                  <div>
                    <span>支持xlsx/xls/csv文件格式，且不超过10MB</span>
                    <vxe-checkbox style="font-size: 12px; margin-left: 15px" v-model="upload.updateSupport">更新数据</vxe-checkbox>
                  </div>
                </div>
              </el-upload>
            </el-row>
          </div>
        </div>
      </template>
      <template v-slot:footer>
        <div class="button-container" style="text-align: center">
          <el-button :loading="upload.isUploading" type="primary" style="margin-top: 12px;" @click="submitFileForm">
            确　定
          </el-button>
        </div>
      </template>
    </vxe-modal>
    <div class="app-content-container">
      <grid-table ref="gridTable"
                  border="inner"
                  name="CustomerManager"
                  :loading.sync="loading"
                  :query="query"
                  :buttons.sync="buttons"
                  :perfect="false"
                  :show-search="true"
                  :columns="tableColumns"
                  :table-data="tableData"
                  @cell-dblclick="handleEdit"
                  @remote-method="getList">
        <template slot="tools">
          <el-input
            v-model="query.custName"
            prefix-icon="el-icon-search"
            placeholder="商户名称"
            clearable
            style="width: 300px;float:right"
            @change="getList">
            <el-button slot="append" @click="getList">搜索</el-button>
          </el-input>
        </template>
        <template v-slot:search-form>
          <el-form class="inline-form" ref="queryForm" :model="query" :inline="true" size="mini">
            <el-form-item label="商户编码">
              <el-input v-model="query.custCode" placeholder="请输入商户编码" class="filter-item" clearable @change="getList"/>
            </el-form-item>
            <el-form-item label="商户状态">
              <el-select v-model="query.status" placeholder="请选择" clearable class="filter-item" @change="getList">
                <el-option v-for="item in statusOptions" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-form>
        </template>
      </grid-table>
    </div>
  </div>
</template>
<script>
  import GridTable from "@/components/GridTable/index";
  import DatePicker from "@/components/DatePicker/index";
  import {exportCustomer, importTemplate, listCustomer} from "@/api/o2o/customer";
  import {getToken} from "@/utils/auth";

  export default {
    components: {GridTable, DatePicker},
    props: [],
    data() {
      return {
        // 导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "商户批量导入",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/o2o/customer/importData",
        },
        formData: {
          custCode: undefined,
          custName: undefined
        },
        // 状态数据字典
        statusOptions: [],
        tableData: [],
        tableColumns: [
          { title: '客户ID', width: 100, field: 'custId', align: 'center', headerAlign: 'center' },
          { title: '客户编码', width: 120, field: 'custCode', headerAlign: 'center'},
          { title: '客户名称', width: "auto", field: 'custName', headerAlign: 'center', align: 'center' },
          { title: '创建时间', width: "auto", field: 'createTime', headerAlign: 'center', align: 'center'},
          { title: '创建人', width: "auto", field: 'createBy', headerAlign: 'center', align: 'center'},
          { title: '更新时间', width: "auto", field: 'updateTime', headerAlign: 'center', align: 'center'},
          { title: '状态', width: 160, headerAlign: 'center', align: 'center',
            slots: {
              default: ({ row }) => {
                const type = row.status === '0' ? 'success' : 'danger'
                return [<el-tag type={type} class="tag-item" size="mini" effect="dark" >{ this.statusFormat(row) }</el-tag>]
              }
            }
          }
        ],
        rules: {
          name: [],
          create_time: [],
        },
        loading: false,
        buttons: [
          { type: 'add', permit: 'o2o:customer:add' },
          { type: 'edit', click: this.handleEdit, permit: 'o2o:customer:edit' },
          { type: 'delete', permit: 'o2o:customer:delete'},
          { type: 'filter', permit: 'o2o:customer:search'},
          { type: 'search', permit: 'o2o:customer:search' },
          { type: 'import', click: this.handleImport, permit: 'o2o:customer:import'},
          { type: 'export', click: this.handleExport, permit: 'o2o:customer:export'},
          { type: 'setting'}
        ],
        query: {
          pageNum: 1,
          pageSize: 20,
          total: 0,
          custId: undefined,
          custCode: undefined,
          custName: undefined,
          status: undefined
        },
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getList();
      this.getDicts("sys_normal_disable").then(response => {
        this.statusOptions = response.data;
      });
    },
    mounted() {
    },
    methods: {
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$XModal.alert(response.msg, "导入结果");
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate().then((response) => {
          this.download(response.msg);
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.query.pageNum = 1;
        this.getList();
      },
      /** 编辑按钮操作 */
      handleEdit(row) {
        this.reset();
        const clientId = row.clientId;
        getCustomer(clientId).then((response) => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商户";
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有商户数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportCustomer(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          })
          .catch(function () {});
      },
      statusFormat(row) {
        return this.selectDictLabel(this.statusOptions, row.status)
      },
      getList() {
        this.loading = true;
        console.log(this.query)
        listCustomer(this.query).then(response => {
          this.tableData = response.rows;
          this.query.total = response.total;
          this.loading = false;
        });
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
</style>
